var React = require('react');
var Loading = require('components/Loading');
    var res=[
        {title:'我是数据1'},
        {title:'我是数据2'},
        {title:'我是数据3'},
        {title:'我是数据4'},
        {title:'我是数据5'}
    ]

    var List=React.createClass({
        getDefaultProps:function(){
          return {
            loading:true
          };
        },
        getInitialState: function() {
          return {
                loading:false,
                arr:[],
            };
        },
        componentWillMount:function(){
          this.getData();
        },
        componentDidMount:function() {
     
            window.addEventListener('scroll',this.handleScroll);
        },
        handleScroll:function(e) {
            console.log(1)
            var _this=this;
            if($(document).height()-$(window).scrollTop()<$(window).height()+10){
                if(!this.state.loading){
                    _this.setState({loading:true,txt:"正在加载中..."});
                    this.getData();
                }
                
            }
        },
        getData:function(){
            var arrNew=this.state.arr;
            arrNew=arrNew.concat(res);
            this.setState({arr:arrNew});
        },
        componentWillUnmount:function() {

            window.removeEventListener('scroll', this.handleScroll);
        },
        addData:function(){
            var arrNew=this.state.arr;
            arrNew=arrNew.concat(res);
            this.setState({arr:arrNew});
        },
        render: function() {
            return ( 
                <div>
       			<Loading />
                {this.state.arr.map(function(obj,idx){
                    return(
                      <div key={idx}>  
                        <div className="xhcontent ub ub-ac">
                            <div className="contimg ">
                                <img src="/images/120x120(1).jpg" />
                            </div>
                            <div className="conttext flex1">
                                <h3 className="text1">{obj.title}</h3> 
                                <p className="text2 ">西乡塘</p>
                                <p className="text2">西乡塘-新阳路塔 普通住宅 毛坯</p>
                                <div className="contspan">
                                    <span>塔楼</span>
                                    <span>普通住宅</span>
                                    <span>毛胚</span>
                                </div>
                                
                            </div>
                            <div className="contright ub">
                            <span className="jiage">价格待定</span>
                            </div>
                        </div>
                        <div className="hr2"></div>
                        </div>
                    )
                },this)}
                    <div onClick={this.addData}>查看更多</div>
                </div>
            )
        }   
    })
React.render(
      <List />,
      document.getElementById('example')
    );